<h1 mat-dialog-title>Configurator for node {{ name }}</h1>

<div class="modal-form-container">
  <div class="content">
    <div class="default-content">
      <mat-card>
        <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
          <ng-container matColumnDef="portIn">
            <th mat-header-cell *matHeaderCellDef>Port : DLCI</th>
            <td mat-cell *matCellDef="let element">{{ element.portIn }}</td>
          </ng-container>

          <ng-container matColumnDef="portOut">
            <th mat-header-cell *matHeaderCellDef>Port : DLCI</th>
            <td mat-cell *matCellDef="let element">{{ element.portOut }}</td>
          </ng-container>

          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef>Actions</th>
            <td mat-cell *matCellDef="let element">
              <button
                mat-icon-button
                matTooltip="Delete port"
                matTooltipClass="custom-tooltip"
                (click)="delete(element)"
              >
                <mat-icon aria-label="Delete port">delete</mat-icon>
              </button>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
        <br />

        <form [formGroup]="nameForm">
          <mat-form-field class="form-field">
            <input matInput type="text" [(ngModel)]="node.name" formControlName="name" placeholder="Name" />
          </mat-form-field>
        </form>

        <form [formGroup]="inputForm">
          Source
          <mat-form-field class="form-field">
            <input matInput type="number" [(ngModel)]="sourcePort" formControlName="sourcePort" placeholder="Port" />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input matInput type="number" [(ngModel)]="sourceDlci" formControlName="sourceDlci" placeholder="DLCI" />
          </mat-form-field>
          Destination
          <mat-form-field class="form-field">
            <input
              matInput
              type="number"
              [(ngModel)]="destinationPort"
              formControlName="destinationPort"
              placeholder="Port"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              type="number"
              [(ngModel)]="destinationDlci"
              formControlName="destinationDlci"
              placeholder="DLCI"
            />
          </mat-form-field>
        </form>

        <button mat-button class="form-field" (click)="add()">Add</button>
      </mat-card>
    </div>
  </div>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>
